<template>
  <div class="app-container">
    <div>
      <el-descriptions
        class="margin-top"
        title="房屋信息"
        :column="6"
        direction="vertical"
        size="small"
        border
      >
        <template slot="extra">
          <el-button type="primary" size="small">编辑</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            所属楼栋
          </template>
          {{ list.building.park.name }}-{{ list.building.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            房间
          </template>
          {{ list.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            类别
          </template>
          {{ list.type == 1 ? "寝室" : "非寝室" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            房间面积：
          </template>
          {{ list.area }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            租金
          </template>
          {{ list.money }} {{ list.rentType == 1 ? "/元/月" : "/元/1m²/月" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            楼层
          </template>
          {{ list.floor }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            是否上架
          </template>
          {{ list.isArrive ? "上架" : "下架" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            是否出租
          </template>
          {{ list.isLease ? "已出租" : "未出租" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            是否满员
          </template>
          {{ list.isFullCapacity ? "是" : "否" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            寝室最大人数
          </template>
          {{ list.maxNumberOfPeople }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            性质
          </template>
          {{
            list.nature == 1
              ? "标间"
              : list.nature == 2
              ? "双人寝室"
              : "4人寝室"
          }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            是否有空调
          </template>
          {{ list.isAirConditioner ? "有" : "无" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            物业费
          </template>
          {{ list.propertyManagement }}
          {{ list.isInternal == 1 ? "/元/月" : "/元/1m²/月" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            是否自用
          </template>
          {{ list.isInternal ? "自用" : "非自用" }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            楼层高度
          </template>
          {{ list.floorHeight }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            装修情况
          </template>
          {{ list.renovation }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            标签
          </template>
          {{ list.labels }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            设备信息
          </template>
          <el-tag
            v-for="(item, index) in list.weMeterList"
            :key="index"
            size="mini"
          >
            {{ item.number }}*{{ item.type == 1 ? "水表" : "电表" }}*{{
              item.magnification
            }}/倍
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            备注
          </template>
          {{ list.remarks }}
        </el-descriptions-item>
      </el-descriptions>

      <el-alert
        title="租赁信息"
        type="info"
        :closable="false"
        description=""
        style="margin-top: 1%; font-weight: bold; color: #666"
      >
      </el-alert>
      <el-table
        :data="list.leaeList"
        border
        style="width: 100%; margin-top: 1%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="date"
          label="用户信息"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.user.name }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="电话" width="180" align="center">
          <template slot-scope="scope">
            {{ scope.row.user.phone }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="租赁对象"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "个人" : "企业" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="企业名称"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "暂无" : scope.row.enterprise.name }}
          </template>
        </el-table-column>
        <el-table-column prop="leaseArea" label="面积" align="center">
        </el-table-column>
        <el-table-column prop="rent" label="租金" align="center">
        </el-table-column>

        <el-table-column
          prop="startDate"
          label="开始时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.startDate | formatYmd }}
          </template>
        </el-table-column>
        <el-table-column
          prop="endDate"
          label="截止时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.endDate | formatYmd }}
          </template>
        </el-table-column>

        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.state == 1"
              type="success"
              size="mini"
              >租赁中
            </el-tag>
            <el-tag v-if="scope.row.state == 2" type="danger" size="mini">
              已退租</el-tag
            >
            <el-tag v-if="scope.row.state == 3" type="warning" size="mini">
              租赁合同签订中</el-tag
            >
          </template>
        </el-table-column>
      </el-table>

      <el-alert
        title="资产列表"
        type="info"
        :closable="false"
        style="margin-top: 1%; font-weight: bold; color: #666"
      >
      </el-alert>
      <!-- <el-alert
    title="资产列表"
    type="info"
    :closable="false"
    effect="dark">
  </el-alert> -->
      <el-table
        :data="list.propertyList"
        border
        style="width: 100%; margin-top: 1%"
        empty-text="暂无数据"
      >
        <el-table-column prop="number" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="propertyName" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="specifications" label="规格" align="center">
        </el-table-column>
        <el-table-column prop="money" label="金额" align="center">
        </el-table-column>
        <el-table-column prop="isUseing" label="是否使用" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.isUseing"
              type="success"
              size="mini
"
              >是
            </el-tag>
            <el-tag v-if="!scope.row.isUseing" type="danger" size="mini">
              否</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="isScrap" label="是否报废" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.isScrap"
              type="success"
              size="mini
"
              >是
            </el-tag>
            <el-tag v-if="!scope.row.isScrap" type="danger" size="mini">
              否</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="startDate"
          label="开始时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.creationTime | formatYmd }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
import { getRoomDetails } from "@/api/room";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
    };
  },
  created() {
    console.log(this.$route.query);
    console.log("123123" + this.$route.query.id);
    this.fetchData(this.$route.query.id);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getRoomDetails(obj).then((response) => {
        this.listLoading = false;
        this.list = response.data;
      });
    },
  },
};
</script>
<style scoped>
.el-descriptions__header {
  margin-bottom: 0px;
}
</style>
  